<template>
	<view>
		<view class="banner">
			<u-swiper @click="swiper" :list="list" mode="none" :height="swiperHeight" bg-color="#fff"></u-swiper>
		</view>
		<view class="nav-list u-flex" :class="{center:navList.length === 3}">
			<view class="item u-flex" v-for="(item,index) in navList" :key="index" @click="jump(`/pages/college/train-list?id=${item.id}&name=${item.classifyName}`)">
				<image :src="item.cover"></image>
				<view class="u-line-1">{{item.classifyName}}</view>
			</view>
		</view>
		<view class="train-list">
			<view class="t-title u-flex" @click="jump('/pages/college/train-list')">
				<view class="tit">最新上线</view>
				<u-icon name="arrow-right" color="#444"></u-icon>
			</view>
			<view class="item u-flex" v-if="courseList.length" @click="jump('/pages/course/course?id=' + courseList[0].id)">
				<image :src="courseList[0].cover"></image>
				<view class="info">
					<view class="tit u-line-1">{{courseList[0].title}}</view>
					<view class="remark u-line-2">{{courseList[0].des}}</view>
					<view class="num-p u-flex">
						<view class="num">共{{courseList[0].classCount}}节</view>
						<view class="price">{{!courseList[0].vip?courseList[0].price+'i币':'会员免费'}}  </view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="train-list" style="border-bottom: 0;">
			<view class="t-title u-flex" @click="jump('/pages/college/train-list')">
				<view class="tit">热门推荐</view>
				<u-icon name="arrow-right" color="#444"></u-icon>
			</view>
			<view class="item u-flex" v-for="(item,index) in courseList" :key="index" v-if="index != 0" 
				@click="jump('/pages/course/course?id=' + item.id)">
				<image :src="item.cover"></image>
				<view class="info">
					<view class="tit u-line-1">{{item.title}}</view>
					<view class="remark u-line-2">{{item.des}}</view>
					<view class="num-p u-flex">
						<view class="num">共{{item.classCount}}节</view>
						<view class="price">{{!item.vip?item.price+'i币':'会员免费'}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"college-train",
		data() {
			return {
				list: [],
				navList:'',
				swiperHeight:250,
				courseList:''
			};
		},
		methods:{
			getBanner(){
				this.$u.api.getBanner().then(res=>{
					this.list = res.map(item=>({image:item.cover,link:item.link}))
					if(res.length && res[0].height){
						this.swiperHeight = res[0].height
					}
				})
			},
			swiper(index){
				let item = this.list[index]
				if(item.link.indexOf('http') > -1){
					this.$app.jump('/pages/webview/webview?url=' + encodeURIComponent(item.link))
				}else{
					this.$app.jump(item.link)
				}
			},
			courseCate(){
				this.$u.api.courseCate().then(res=>{
					this.navList = res
				})
			},
			getList(){
				this.$u.api.courseList({
					limit:15
				}).then(res=>{
					this.courseList = res
				})
			},
			jumpDetail(index){
				// 课程详情
			}
		},
		created() {
			this.getBanner()
			this.courseCate()
			this.getList()
		}
	}
</script>

<style lang="scss">
	.banner{padding: 20rpx 60rpx 0;}
	.nav-list{
		padding: 40rpx 40rpx 20rpx;border-bottom: 10rpx solid #F1F1F1;
		flex-wrap: wrap;
		&.center{justify-content: space-between;}
		.item{
			justify-content: center;flex-direction: column;width: 25%;padding-bottom: 10rpx;
			image{display: block;width: 120rpx;height: 120rpx;}
			view{width: 100%;text-align: center;font-weight: bold;padding-top: 10rpx;}
		}
	}
	.train-list{
		padding: 0 60rpx 0;border-bottom: 10rpx solid #F1F1F1;
		.t-title{justify-content: space-between;height: 100rpx;
			.tit{font-size: 32rpx;font-weight: bold;}
		}
		.item{
			padding-bottom: 50rpx;
			image{width: 200rpx;height: 200rpx;border-radius: 20rpx;flex-shrink: 0;margin-right: 20rpx;}
			.info{
				overflow: hidden;flex: 1;
				.tit{height: 44rpx;font-weight: bold;font-size: 30rpx;}
				.remark{height: 80rpx;line-height: 40rpx;font-size: 26rpx;text-align: justify;margin: 10rpx 0;}
				.num-p{
					justify-content: space-between;
					.num{font-size: 30rpx;}
					.price{color: $tc;font-weight: bold;font-size: 30rpx;}
				}
			}
		}
	}
</style>
